<template>
    <div class="container">
        <h1>登录中心</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">用户名</td>
                    <td>
                        <input type="text" v-model="queryInfo.userName">
                    </td>
                </tr>
                <tr>
                    <td align="right">密码</td>
                    <td>
                        <input type="password" v-model="queryInfo.userPwd">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" class="btn btn-primary" value="登录" @click="Login">
                    </td>
                </tr>
                <!-- 1211 -->
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

let queryInfo = reactive({
    userName: '',
    userPwd: ''
})

const Login = () => {
    //1.判断有效性
    if (queryInfo.userName == "") {
        alert("账号不能为空");
        return;
    }
    if (queryInfo.userPwd == "") {
        alert("密码不能为空");
        return;
    }
    //2.发送网络请求去后端验证账号和密码在数据控中是否存在

}

</script>

<style scoped></style>